<template>
  <a-drawer
    title="过度效果"
    :width="430"
    :visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    <div class="title">
      当前选中{{ activeKey == "in" ? "淡入" : "淡出" }}效果：{{
        `${
          currentKey[activeKey]
            ? matchData.transitions[currentKey[activeKey]]
            : "暂无"
        }`
      }}
      <a-button
        v-if="currentKey[activeKey]"
        @click="currentKey[activeKey] = ''"
        type="link"
        >清除</a-button
      >
    </div>
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
      <a-tab-pane key="in" tab="淡入"></a-tab-pane>
      <a-tab-pane key="out" tab="淡出"></a-tab-pane>
    </a-tabs>
    <div class="transition_con">
      <div
        class="transition_item"
        v-for="(item, index) in transitionObj[activeKey]"
        :key="index"
      >
        <div class="transition_name">{{ item.name }}</div>
        <div class="material_con">
          <div
            class="material_item"
            @click.stop="chooseThis(material_item)"
            v-for="(material_item, material_index) in item.materials"
            :key="material_index"
          >
            <div
              class="material_image"
              :class="
                currentKey[activeKey] == material_item.scene_type
                  ? 'active'
                  : ''
              "
            >
              <video
                :id="activeKey + '_' + index + '_' + material_index"
                @ended="handleEnded"
                @mouseout="(value) => handleMouseOut(value)"
                @mouseenter="(value) => handleMouseIn(value)"
                :src="material_item.material_url"
                alt=""
              />
            </div>
            <div class="material_name">
              {{ material_item.material_name }}{{ material_item.show }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script>
import matchData from "./match_data.js";
import { defineComponent, reactive, ref, toRefs, watch, nextTick } from "vue";
import { message } from "ant-design-vue";
import request from "@/common/utils/request.js";

function getTransitions() {
  return request.get("/work_ai", "/user/shotstack/material/transtions/list");
}
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    transitionKey: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  emits: ["close"],

  setup(props, context) {
    const state = reactive({
      activeKey: "in",
      currentKey: { in: "", out: "" },
      transitionObj: { in: [], out: [] },
    });

    const onClose = () => {
      context.emit("close", "close");
    };

    const handleSubmit = () => {
      context.emit("close", state.currentKey);
    };

    const getTransitionList = () => {
      getTransitions().then((res) => {
        state.transitionObj["in"] = res.result.transitions_in;
        state.transitionObj["out"] = res.result.transitions_out;
        initVideoTime();
      });
    };

    const chooseThis = (item) => {
      state.currentKey[state.activeKey] = item.scene_type;
    };

    const handleMouseIn = (e) => {
      e.target.currentTime = 0;
      e.target.play();
    };

    const handleEnded = (e) => {
      if (state.activeKey == "out") {
        e.target.currentTime = 0;
      }
    };

    const handleMouseOut = (e) => {
      if (state.activeKey == "in") {
        e.target.currentTime = 2000;
      } else {
        e.target.currentTime = 0;
      }
      e.target.pause();
    };

    const handleTabChange = (key) => {
      if (key == "in") {
        initVideoTime();
      }
    };

    const initVideoTime = () => {
      state.transitionObj["in"].map((item, index) => {
        item.materials.map((material_item, material_index) => {
          nextTick(() => {
            let dom = document.getElementById(
              state.activeKey + "_" + index + "_" + material_index
            );
            dom.currentTime = 2000;
          });
        });
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          state.activeKey = "in";
          getTransitionList();
        }
        if (val && props.transitionKey) {
          state.currentKey = props.transitionKey;
        } else if (val && !props.transitionKey) {
          state.currentKey = { in: "", out: "" };
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      chooseThis,
      handleSubmit,
      handleMouseIn,
      handleEnded,
      matchData,
      handleMouseOut,
      handleTabChange,
    };
  },
});
</script>

<style lang="less" scoped>
.title {
  height: 30px;
  color: #333;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}
.transition_con {
  width: 100%;

  .transition_item {
    margin-top: 10px;

    .transition_name {
      color: #333;
      font-weight: bold;
      font-size: 14px;
    }

    .material_con {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;

      .material_item {
        margin-top: 5px;
        cursor: pointer;
        width: 32%;
        .material_image {
          width: 100%;
          height: 70px;
          border-radius: 5px;
          border: 2px solid transparent;
          position: relative;
          &.active {
            border: 2px solid #40dde7;
          }
          video {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            overflow: hidden;
            filter: grayscale(0.1);
          }
        }

        .material_name {
          color: #666;
          margin-top: 5px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
